<template>
  <div class="page" style="padding-bottom: 80px;padding-top: 20px;">
    <div v-for="(dp, index) in dateProgresses" :key="index" style="margin-bottom: 20px;">
      <div class="bd-l-main pdl">{{index}}</div>
      <div class="weui-cells weui-cells_after-title mgb-s v-mdl">
        <navigator v-for="(n, i) in dp" :key="i" :url="'/pages/progress/main?progressId=' + n.id" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
          <div class="weui-cell__bd">
            <div v-if="n.document">{{n.document.name}} <span v-if="n.unreadCount < 0" class="dolt"></span></div>
            <div class="weui-flex fs-5 pdt">
              <div style="width: 40%;">
                <span v-if="n.task && n.task.group && n.task.group.name">{{n.task.group.name}}</span>
                <open-data v-if="n.task && n.task.group && n.task.group.openGroupId" type="groupName" :open-gid="n.task.group.openGroupId"></open-data>
              </div>
              <div class="weui-flex__item">
                <div v-if="n.task && n.task.expireAtName">截止时间：{{n.task.expireAtName}}</div>
              </div>
            </div>
          </div>
          <div class="weui-cell__ft">
            <div v-if="!n.isExpired">
              <span v-if="n.state == 'start'" class="tag danger">待完成</span>
              <span v-if="n.state == 'redo'" class="tag danger">待完成</span>
              <span v-if="n.state == 'check'" class="tag success">已完成</span>
              <span v-if="n.state == 'done'" class="tag success">已完成</span>
            </div>
            <div v-else>
              <span class="tag">逾期未交</span>
            </div>
          </div>
        </navigator>
      </div>
    </div>
    <div v-if="progresses.length >= 0 && page.hasMore" class="ta-c pdt">数据加载中...</div>
    <div v-else class="ta-c pdt c-gray">没有更多啦！</div>
    <page-common></page-common>
    <page-mask v-if="isPageLoading"></page-mask>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import PageCommon from '@/components/page-common'
import { mapGetters, mapActions } from 'vuex'
import TabBar from '@/components/tab-bar'
import base from '@/mixins/base'
import Avatar from '@/components/avatar'
import PageMask from './page-mask.vue'
import dayjs from 'dayjs'
export default {
  mixins: [base],
  components: {
    PageCommon,
    TabBar,
    Avatar,
    PageMask
  },
  data () {
    return {
      isPageNeedAuthUser: true
    }
  },
  async onReachBottom () {
    if (!this.page.hasMore) return
    this.getProgressesByPage({pi: this.page.pageIndex + 1})
  },
  async onPullDownRefresh() {
    await this.getProgressesByPage({pi: 0, cache: false})
    wx.stopPullDownRefresh()
  },
  computed: {
    ...mapGetters([
      'isLogined',
      'page'
    ]),
    ...mapGetters('progress', [
      'progresses',
      'pageProgressesLoaded'
    ]),
    dateProgresses () {
      let t = {}
      if (!this.progresses.length === 0) return t
      this.progresses.forEach(n => {
        let createdDate = dayjs(n.createdAt).format('YYYY-MM-DD')
        t[createdDate] = t[createdDate] || []
        if (n.expireAt) {
          n.expireAt = dayjs(n.expireAt).format('MM-DD HH:mm')
        }
        t[createdDate].push(n)
      })
      return t
    },
  },
  onLoad () {
    // ***start***返回首页操作有关，参数从task invite 页传来
    let {progressId, forward, groupId} = this.getParams()
    if (progressId) {
      wx.navigateTo({
        url: '/pages/progress/main?progressId=' + progressId
      })
      return
    }
    if (forward === 'group-invite' && groupId) {
      wx.navigateTo({
        url: '/pages/group-index/main?groupId=' + groupId
      })
    }
    // ***end
  },
  methods: {
    onPageShow () {
      this.setCurrentTab('homework')
      this.isPageLoading = true
    },
    onPageHide () {
      this.isPageLoading = false
    },
    async loginBack () {
      try {
        if (this.progresses.length > 0) {
          this.isPageLoading = false
          return
        }
        await this.getProgressesByPage({pi: 0})
        this.isPageLoading = false
      } catch (e) {
        this.isPageLoading = false
        this.$debug({err: e})
      }
    },
    ...mapActions([
      'getProgressesByPage',
      'setCurrentTab'
    ]),
    ...mapActions('progress', [
      'setPageProgressesLoaded'
    ]),
  },
}
</script>

<style scoped lang="less">
@import '../../assets/less/var.less';
</style>
